<!--
 * @author: 十一
 * @since: 2024-10-27
 * BarChart.vue
 * @desc: new page
-->
<template>
  <dv-charts :option="option" style="100%;height:30%" />
</template>

<script lang="ts" setup>
import { ref } from "vue";
const option = {
  // title: {
  //   text: "周销售额趋势",
  //   style: {
  //     fill: "#ffffff",
  //     fontSize: 17,
  //     fontWeight: "100",
  //     textAlign: "center",
  //     textBaseline: "bottom",
  //   },
  // },
  legend: {
    orient: "111",
    data: ["销售额", "新增用户", "在线率"],
    top: 20,
    textStyle: {
      fontSize: 13,
      fill: "#ffffff",
    },
  },
  color:['#ffdb5c','#fb7293','#8378ea'],
  xAxis: {
    data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    axisLabel: {
      //坐标轴标签配置
      style: {
        fill: "#ffffff",
        fontSize: 10,
        rotate: 0,
      },
    },
    axisLine: {
      //坐标轴线配置
      style: {
        stroke: "#ffffff",
        lineWidth: 1,
      },
    },
  },
  yAxis: {
    //坐标轴标签配置
    data: "value",
    axisLabel: {
      style: {
        fill: "#ffffff",
        fontSize: 10,
        rotate: 0,
      },
    },
    axisLine: {
      //坐标轴线配置
      style: {
        stroke: "#ffffff",
        lineWidth: 1,
      },
    },
  },
  series: [
    {
      data: [1987,2468,3579,4680,5791,6802,7913],
      type: "bar",
      name: "销售额",
    },
    {
      data: [4321,5678,2345,6789,1234,7890,8765],
      type: "bar",
      name: "新增用户",
    },
    {
      data: [3456,7890,1237,4568,2345,5678,8910],
      type: "bar",
      name: "在线率",
    },
  ],
};
</script>

<style lang="less" scoped></style>
